<template>
  <div class="cont-minheight">
    <div class="user-info">
      <div class="user-pic">
        <img src="../../assets/images/morentouxiang.png" />
      </div>
      <div class="user-msg">
        <div class="user-na">
          <div class="user-name">{{ myMessage[0].username }}</div>
        </div>
        <div class="change-portrait">修改头像</div>
      </div>
      <div class="youxiang-info">
        <div class="youxiang-name">优享汇</div>
        <div class="youxiang-item">
          <span class="youxiang-core">0</span>
          <span class="youxiang-c">积分</span>
        </div>
      </div>
      <div class="youxiang-pic">
        <img src="../../assets/images/icon-wj.png" />
      </div>
    </div>
    <div class="mine">
      <h3>我的信息</h3>
      <div class="my-info">
        <el-form ref="form" :model="myMessage[0]" label-width="140px">
          <el-form-item label="真实姓名">
            <el-input v-model="myMessage[0].username"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="myMessage[0].nickname"></el-input>
          </el-form-item>
          <el-form-item label="账户密码">
            <el-input
              v-model="myMessage[0].password"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <span class="tel-num">{{ myMessage[0].tel }}</span>
          </el-form-item>
          <el-form-item label="出生日期">
            <div class="block">
              <el-date-picker
                v-model="myMessage[0].birth"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="年龄">
            <span class="tel-num">{{ theYear - theAge }} 岁</span>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="myMessage[0].address"></el-input>
          </el-form-item>
          <el-form-item label="我的专属销售">
            <span class="tel-num">{{ myMessage[0].salesmanId.salesName }}</span>
          </el-form-item>
          <el-form-item label="专属销售联系方式">
            <span class="tel-num">{{ myMessage[0].salesmanId.tel }}</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :plain="true"
              >立即修改</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "homePage"
);
export default {
  created() {
    this.getMessage(localStorage._id);
    this.setTheYear();
  },
  computed: {
    ...mapState(["myMessage", "theYear"]),
    theAge() {
      return this.myMessage[0].birth.slice(0, 4);
    },
  },
  methods: {
    ...mapMutations(["setTheYear"]),
    ...mapActions(["getMessage", "updateMsg"]),
    async onSubmit() {
      const data = await this.updateMsg(this.myMessage);
      if (data.status) {
        this.$message({
          message: "恭喜你，信息修改成功！",
          type: "success",
        });
        this.getMessage(localStorage._id);
      } else {
        this.$message.error("对不起，信息修改失败！");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cont-minheight {
  width: 100%;
  margin: 0 auto;
  padding: 25px 35px 0;
  .user-info {
    border: 1px dashed #4a90e2;
    padding: 14px 20px;
    background-color: #f6faff;
    display: flex;
    align-items: center;
    .user-pic {
      height: 70px;
      width: 70px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #eee;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .user-msg {
      margin-left: 18px;
      .user-na {
        color: #333;
        font-size: 16px;
        height: 34px;
        line-height: 34px;
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .change-portrait {
        width: 100px;
        height: 32px;
        border: 1px solid #005bac;
        display: inline-block;
        border-radius: 4px;
        line-height: 30px;
        font-size: 16px;
        text-align: center;
        color: #005bac;
        cursor: pointer;
      }
    }
    .youxiang-info {
      padding-top: 12px;
      font-size: 14px;
      cursor: pointer;
      margin-left: 150px;
      .youxiang-name {
        line-height: 24px;
        color: #333;
      }
      .youxiang-item {
        .youxiang-core {
          font-size: 15px;
          color: #f5a100;
          margin-right: 10px;
          line-height: 24px;
        }
        .youxiang-c {
          color: #666;
          font-size: 12px;
        }
      }
    }
    .youxiang-pic {
      cursor: pointer;
      width: 75px;
      height: 30px;
      margin: 14px 0 0 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .mine {
    h3 {
      color: #005bac;
    }
    .my-info {
      width: 500px;
      .tel-num {
        width: 220px;
        height: 32px;
        line-height: 32px;
        padding-left: 10px;
        color: #999;
        font-size: 14px;
      }
    }
  }
}
</style>